<template>
  <div>
    <div class="designList">
      <el-scrollbar height="200px">
         <template v-if="materialData.length">
            <div v-for="item in materialData" :key="item.id">
                <el-radio-group v-model="selectValue" class="radioGroup">
                    <el-radio :disabled="disabled" @change="radioChange" :label="item.id" size="large">
                      <div class="info">
                        <div class="infoLeft">
                          <div class="icon">
                            <svg class="coloricon" aria-hidden="true">
                              <use :xlink:href="'#' + getFileIcon(item.name)"></use>
                            </svg>
                          </div>
                          <el-tooltip
                              class="box-item"
                              effect="dark"
                              :content="item.name"
                              placement="top"
                            >
                          <span>{{giveEllipsisStr1(item.name,15)}}</span>
                          </el-tooltip>
                        </div>
                        <div class="infoRight">{{parseTime(item.create_time)}}</div>
                      </div>
                    </el-radio>
                </el-radio-group>
            </div>
        </template>

        <template v-else>
          <el-empty description="暂无数据" :image-size="100"></el-empty>
        </template>

      </el-scrollbar>
    </div>

  </div>
</template>
<script setup>
import { nextTick, ref } from "vue";
import {getFileIcon} from "@/utils/common";
import { giveEllipsisStr1,parseTime } from "@/utils/common"
import { useRoute } from "vue-router";
const disabled=ref(false)
const props = defineProps({
  materialData:{
    type:Array
  }
});
const emits=defineEmits(['update:materialData'])
const selectValue = ref();

watch(()=>props.materialData,nv=>{  
  let find =  nv.find(find=>find.checked)  
  selectValue.value =  find?.id ?? null;
},{immediate:true,deep:true})


// 素材选中事件
const radioChange=(e)=>{  

  let materialData = props.materialData;
  setChecked(materialData,e);
  emits("update:materialData",materialData);
}

//修改checked状态
function setChecked(arr, targetId) {
  arr.forEach(item => {
    if (item.id === targetId) {
      item.checked = true;
    } else {
      item.checked = false;
    }
  });
}

</script>
<style lang='scss' scoped>
.radioGroup {
  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 30px;

    .infoLeft {
      display: flex;
      align-items: center;

      span {
        margin-left: 5px;
      }
    }

    .infoRight {
      color: #999;
      font-size: 12px;
    }


  }
}

.pageOut {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}


.el-radio.el-radio--large {
  width: 100%;
}

.el-radio-group {
  display: block;
}

.coloricon{
  font-size: 30px;
}
</style>
